<template>
	<view class="content">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="filter-item">
				地区：<view class="filter-controller">全部</view>
			</view>
			<input class="search-input" focus placeholder="点击搜索雪茄" />
			<icon type="" class="fontIcon icon-user" />
			<icon type="" class="fontIcon icon-remind redDot" />
		</view>
		<!-- 顶图 -->
		<view class="top-slider banner-slider">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/temp-topAd.webp" mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/temp-vipAd.webp" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 排序标签 -->
		<view class="list-sort-bar posts-sort">
			<button class="sort-button selected">去哪儿</button>
			<button class="sort-button">店铺活动</button>
			<button class="small-btn btn-store-join" style="margin-left: auto;"><icon type="" class="fontIcon icon-city"/>我要入驻</button>
		</view>
		<!-- 店铺活动列表 -->
		<view class="store-activity-card-list">
			<view class="list-header-bar">
				<icon type="" class="imgIcon icon-area-rank"/>
				<view class="header-title">本地优惠活动排行榜</view>
				<view class="header-buttons">
					<button class="btn-goto">全部<icon type="" class="fontIcon icon-goto"/></button>
				</view>
			</view>
			<view class="store-activity-card recommend">
				<view class="store-activity-head first">
						<icon style="" class="imgIcon icon-store-activity-medal-fist"/>
						<text>黄金喷香，一口上瘾，爆款放肆开吃黄金喷香，一口上瘾，爆款放肆开吃</text>
				</view>
				<image src="../../static/temp-topAd.webp" mode="widthFix"></image>
			</view>
			<view class="store-activity-card recommend">
				<view class="store-activity-head second">
						<icon style="" class="imgIcon icon-store-activity-medal-second"/>
						<text>黄金喷香，一口上瘾，爆款放肆开吃黄金喷香，一口上瘾，爆款放肆开吃</text>
				</view>
				<image src="../../static/temp-topAd.webp" mode="widthFix"></image>
			</view>
			<view class="store-activity-card recommend">
				<view class="store-activity-head third">
						<icon style="" class="imgIcon icon-store-activity-medal-third"/>
						<text>黄金喷香，一口上瘾，爆款放肆开吃黄金喷香，一口上瘾，爆款放肆开吃</text>
				</view>
				<image src="../../static/temp-topAd.webp" mode="widthFix"></image>
			</view>
			<view class="store-activity-card recommend">
				<view class="store-activity-head">
						<view class="normal-place-circle">4</view>
						<text>黄金喷香，一口上瘾，爆款放肆开吃黄金喷香，一口上瘾，爆款放肆开吃</text>
				</view>
				<image src="../../static/temp-topAd.webp" mode="widthFix"></image>
			</view>
			<view class="store-activity-card">
				<image src="../../static/temp-topAd.webp" mode="widthFix"></image>
			</view>
		</view>
		<!-- 店铺列表 -->
		<view class="store-card-list">
			<view class="store-card recommend">
				<view class="store-head supporter">
					<view class="head-sign">
						<icon type="" class="fontIcon icon-crown"/>特别赞助
					</view>
				</view>
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="item-info">
					<view class="name">黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄<icon type="" class="imgIcon icon-tobacco"/></view>
					<view class="info-item">
						<h-com-star></h-com-star>
						<view class="popularity-number">人气: 9999</view>
					</view>
					<view class="info-item">
						酒吧，咖啡馆，雪茄 | <icon type="" class="fontIcon icon-address"/>9.0km
					</view>
					<view class="info-item store-tag-list">
						<text class="store-tag strong-tag">高新区第一名</text>
						<text class="store-tag">威士忌</text>
						<text class="store-tag">有现场乐队</text>
						<text class="store-tag">雪茄烟</text>
						<text class="store-tag">白酒</text>
						<text class="store-tag">红酒</text>
						<text class="store-tag">饮料</text>
					</view>
				</view>
			</view>
			<view class="list-header-bar">
				<icon type="" class="imgIcon icon-area-rank"/>
				<view class="header-title">本地人气排行</view>
				<view class="header-buttons">
					<button class="btn-goto">全部<icon type="" class="fontIcon icon-goto"/></button>
				</view>
			</view>
			<!-- 第一名 -->
			<view class="store-card recommend">
				<view class="store-head first">
					<view class="head-sign">
						<icon style="" class="imgIcon icon-store-medal-fist"/>
					</view>
				</view>
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="item-info">
					<view class="name">黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄<icon type="" class="imgIcon icon-tobacco"/></view>
					<view class="info-item">
						<h-com-star></h-com-star>
						<view class="popularity-number">人气: 9999</view>
					</view>
					<view class="info-item">
						酒吧，咖啡馆，雪茄 | <icon type="" class="fontIcon icon-address"/>9.0km
					</view>
					<view class="info-item store-tag-list">
						<text class="store-tag strong-tag">高新区第一名</text>
						<text class="store-tag">威士忌</text>
						<text class="store-tag">有现场乐队</text>
						<text class="store-tag">雪茄烟</text>
						<text class="store-tag">白酒</text>
						<text class="store-tag">红酒</text>
						<text class="store-tag">饮料</text>
					</view>
				</view>
			</view>
			<!-- 第二名 -->
			<view class="store-card recommend">
				<view class="store-head second">
					<view class="head-sign">
						<icon style="" class="imgIcon icon-store-medal-second"/>
					</view>
				</view>
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="item-info">
					<view class="name">黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄<icon type="" class="imgIcon icon-tobacco"/></view>
					<view class="info-item">
						<h-com-star></h-com-star>
						<view class="popularity-number">人气: 9999</view>
					</view>
					<view class="info-item">
						酒吧，咖啡馆，雪茄 | <icon type="" class="fontIcon icon-address"/>9.0km
					</view>
					<view class="info-item store-tag-list">
						<text class="store-tag strong-tag">高新区第一名</text>
						<text class="store-tag">威士忌</text>
						<text class="store-tag">有现场乐队</text>
						<text class="store-tag">雪茄烟</text>
						<text class="store-tag">白酒</text>
						<text class="store-tag">红酒</text>
						<text class="store-tag">饮料</text>
					</view>
				</view>
			</view>
			<!-- 第三名 -->
			<view class="store-card recommend">
				<view class="store-head third">
					<view class="head-sign">
						<icon style="" class="imgIcon icon-store-medal-third"/>
					</view>
				</view>
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="item-info">
					<view class="name">黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄黑胡桃木雪茄<icon type="" class="imgIcon icon-tobacco"/></view>
					<view class="info-item">
						<h-com-star></h-com-star>
						<view class="popularity-number">人气: 9999</view>
					</view>
					<view class="info-item">
						酒吧，咖啡馆，雪茄 | <icon type="" class="fontIcon icon-address"/>9.0km
					</view>
					<view class="info-item store-tag-list">
						<text class="store-tag strong-tag">高新区第一名</text>
						<text class="store-tag">威士忌</text>
						<text class="store-tag">有现场乐队</text>
						<text class="store-tag">雪茄烟</text>
						<text class="store-tag">白酒</text>
						<text class="store-tag">红酒</text>
						<text class="store-tag">饮料</text>
					</view>
				</view>
			</view>
			<!-- 其它排名 -->
			<view class="store-card recommend">
				<view class="store-head">
					<view class="head-sign">
						<view class="normal-place-circle">4</view>
					</view>
				</view>
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="item-info">
					<view class="name">黑胡桃木雪茄黑胡桃木雪茄<icon type="" class="imgIcon icon-tobacco"/></view>
					<view class="info-item">
						<h-com-star></h-com-star>
						<view class="popularity-number">人气: 9999</view>
					</view>
					<view class="info-item">
						酒吧，咖啡馆，雪茄 | <icon type="" class="fontIcon icon-address"/>9.0km
					</view>
					<view class="info-item store-tag-list">
						<text class="store-tag strong-tag">高新区第一名</text>
						<text class="store-tag">威士忌</text>
						<text class="store-tag">有现场乐队</text>
						<text class="store-tag">雪茄烟</text>
						<text class="store-tag">白酒</text>
						<text class="store-tag">红酒</text>
						<text class="store-tag">饮料</text>
					</view>
				</view>
			</view>
			<!-- 其它排名 -->
			<view class="store-card recommend">
				<view class="store-head">
					<view class="head-sign">
						<view class="normal-place-circle">5</view>
					</view>
				</view>
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="item-info">
					<view class="name">黑胡桃木雪茄黑胡桃木雪茄<icon type="" class="imgIcon icon-tobacco"/></view>
					<view class="info-item">
						<h-com-star></h-com-star>
						<view class="popularity-number">人气: 9999</view>
					</view>
					<view class="info-item">
						酒吧，咖啡馆，雪茄 | <icon type="" class="fontIcon icon-address"/>9.0km
					</view>
					<view class="info-item store-tag-list">
						<text class="store-tag strong-tag">高新区第一名</text>
						<text class="store-tag">威士忌</text>
						<text class="store-tag">有现场乐队</text>
						<text class="store-tag">雪茄烟</text>
						<text class="store-tag">白酒</text>
						<text class="store-tag">红酒</text>
						<text class="store-tag">饮料</text>
					</view>
				</view>
			</view>
			<!-- 无名次显示 -->
			<view class="store-card">
				<view class="preview-img">
					<image src="../../static/temp-photo.jpg" mode="widthFix"></image>
				</view>
				<view class="item-info">
					<view class="name">黑胡桃木雪茄黑胡桃木雪茄<icon type="" class="imgIcon icon-tobacco"/></view>
					<view class="info-item">
						<h-com-star></h-com-star>
						<view class="popularity-number">人气: 9999</view>
					</view>
					<view class="info-item">
						酒吧，咖啡馆，雪茄 | <icon type="" class="fontIcon icon-address"/>9.0km
					</view>
					<view class="info-item store-tag-list">
						<text class="store-tag strong-tag">高新区第一名</text>
						<text class="store-tag">威士忌</text>
						<text class="store-tag">有现场乐队</text>
						<text class="store-tag">雪茄烟</text>
						<text class="store-tag">白酒</text>
						<text class="store-tag">红酒</text>
						<text class="store-tag">饮料</text>
					</view>
				</view>
			</view>

		</view>
		<!-- 浮动底栏位置补偿 -->
		<view class="filler-block"></view>

	</view>
</template>

<script>
	export default {
	    data() {
	        return {
	            background: ['color1', 'color2', 'color3'],
	            indicatorDots: true,
	            autoplay: true,
	            interval: 2000,
	            duration: 500
	        }
	    },
	    methods: {
	        changeIndicatorDots(e) {
	            this.indicatorDots = !this.indicatorDots
	        },
	        changeAutoplay(e) {
	            this.autoplay = !this.autoplay
	        },
	        intervalChange(e) {
	            this.interval = e.target.value
	        },
	        durationChange(e) {
	            this.duration = e.target.value
	        }
	    }
	}
</script>
